<template>
  <div class="u-page-config">
    <div class="select" style="width: 200px" v-if="select"></div>
    <div class="content">
      <template v-if="showHeader">
        <table-filter
            v-model="filter"
            :form-array="filterArray"
            @search="getList"
            :labelWidth="labelWidth"
        >
          <template #filter="{item}">
            <slot :name="item.slot" :item="item"/>
          </template>
        </table-filter>
      </template>
      <slot name="head"></slot>
      <table-action
          :btn-arr="actionBtn"
          @toggle="toggleFilter"
          @refresh="getList"
          :show-tool="showTool"
          @clickEvent="clickEvent"
      >
        <template #headerBtn>
          <slot name="headerBtn"></slot>
        </template>
      </table-action>
      <table-content
          style="margin-top: 20px"
          ref="pageConfig"
          :table-data="tableData"
          :table-column="tableColumn"
          :selectable="selectable"
          @clickEvent="clickEvent"
          v-loading="loading"
          :show-selection="showSelection"
      >
        <template #custom="{row, item}">
          <slot :name="item.slot || item.prop" :row="row" :item="item"></slot>
        </template>
      </table-content>
      <div style="display: flex;align-items: center;justify-content: flex-end">
        <el-pagination
            style="text-align: center;margin-top: 20px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="filter.pageNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="filter.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>

      </div>
    </div>
  </div>
</template>

<script>
import TableFilter from "./header/index.vue";
import TableAction from "./action/index.vue";
import TableContent from "./table/index.vue";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "uPageConfig",
  components: {TableContent, TableAction, TableFilter},
  props: {
    select: {
      type: Object | null
    },
    filterArray: {
      type: Array,
      default: () => []
    },
    actionBtn: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
    },
    tableColumn: {
      type: Array,
    },
    total: {
      type: Number,
      default: 0
    },
    value: {
      type: Object,
      default: () => {
        return {
          pageSize: 10,
          pageNum: 1,
          data: {}
        }
      }
    },
    getList: Function,
    showFilter: {
      default: true,
      type: Boolean
    },
    loading: {
      default: true,
      type: Boolean
    },
    showTool: {
      default: true,
      type: Boolean
    },
    labelWidth:{
      type: String,
      //auto有时会有警告，如果想自适应为空就行，如果要对齐需要传固定宽度
      default: ""
    },
    //表格前面多选框
    showSelection:{
      type: Boolean,
      default: false
    },
    selectable:{
      type: Function
    }
  },
  data() {
    return {
      showHeader: this.showFilter
    }
  },
  computed:{
    filter:{
      set (val) {
        this.$emit('update', val)
        this.$emit('input', val)
      },
      get () {
        return this.value
      }
    }
  },

  watch:{
    filter:{
      deep: true,
      handler (val) {
        this.getList()
      }
    }
  },

  async created() {
    await this.getList && this.getList()
  },
  methods: {
    toggleFilter() {
      this.showHeader = !this.showHeader
    },
    clickEvent({item, row}) {
      this.$emit(item.emit, row)
    },
    handleSizeChange(val) {
      console.log(val)
      this.filter.pageSize = val
    },
    handleCurrentChange(val) {
      console.log(val)
      this.filter.pageNum = val
    },
  }
}
</script>

<style scoped lang="scss">
.u-page-config {
  display: flex;
  height: 100%;

  .select {
    flex-shrink: 0;
  }

  .content {
    flex: 1;
    width: 100%;
  }

}
</style>
